<!--
 * @Description: 定位到页面指定位置
 * @Date: 2022-10-25 11:51:23
 * @LastEditTime: 2022-10-25 12:01:09
 * @FilePath: /demo_important/src/views/ToTable/index.vue
 * @Author: byhzdemacbook-pro-2.local
-->
<template>
  <div>
    <el-container>
      <el-aside width="120px" class="left-menu">
        <div class="son" @click="toJump1">定位1</div>
        <div class="son" @click="toJump2">定位2</div>
        <div class="son" @click="toJump3">定位3</div>
        <div class="son" @click="toJump4">定位4</div>
        <div class="son" @click="toJump5">定位5</div>
        <div class="son" @click="toJump6">定位6</div>
        <div class="son" @click="toJump7">定位7</div>
        <div class="son" @click="toJump8">定位8</div>
      </el-aside>
      <el-main style="height: 305px">
        <el-form ref="dataForm" label-position="right">
          <div ref="jump1">
            <el-row>
              <el-form-item label="定位1" label-width="75px"
                >夫人夫人规划图</el-form-item
              >
            </el-row>
          </div>
          <div ref="jump2">
            <el-row>
              <el-form-item label="定位2" label-width="75px"
                >纷纷热发</el-form-item
              >
            </el-row>
          </div>
          <div ref="jump3">
            <el-row>
              <el-form-item label="定位3" label-width="75px"
                >纷纷热</el-form-item
              >
            </el-row>
          </div>
          <div ref="jump4">
            <el-row>
              <el-form-item label="定位4" label-width="75px"
                >非人非为人父</el-form-item
              >
            </el-row>
          </div>
          <div ref="jump5">
            <el-row>
              <el-form-item label="定位51" label-width="75px"
                >方法refer</el-form-item
              >
            </el-row>
            <el-row>
              <el-form-item label="定位52" label-width="75px"
                >发顺丰v从</el-form-item
              >
            </el-row>
          </div>
          <div ref="jump6">
            <el-row>
              <el-form-item label="定位61" label-width="75px"
                >发热微软刚刚发</el-form-item
              >
            </el-row>
            <el-row>
              <el-form-item label="定位62" label-width="75px"
                >芙蓉厅402</el-form-item
              >
            </el-row>
          </div>
          <div ref="jump7">
            <el-row>
              <el-form-item label="定位71" label-width="75px"
                >服务范围如果</el-form-item
              >
            </el-row>
            <el-row>
              <el-form-item label="定位72" label-width="75px"
                >谔谔温热给我个</el-form-item
              >
            </el-row>
          </div>
          <div ref="jump8">
            <el-row>
              <el-form-item label="定位81" label-width="75px"
                >vfsvfret423r34</el-form-item
              >
            </el-row>
            <el-row>
              <el-form-item label="定位82" label-width="75px"
                >dadewqewrqrqwerq0</el-form-item
              >
            </el-row>
          </div>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>
 
 
<script>
export default {
  name: 'Demo',
  data() {
    return {};
  },
  methods: {
    // 类似html中的锚链接，点击的时候，将对应的内容显示在可视区域内
    toJump1() {
      this.$refs['jump1'].scrollIntoView(true);
    },
    toJump2() {
      this.$refs['jump2'].scrollIntoView(true);
    },
    toJump3() {
      this.$refs['jump3'].scrollIntoView(true);
    },
    toJump4() {
      this.$refs['jump4'].scrollIntoView(true);
    },
    toJump5() {
      this.$refs['jump5'].scrollIntoView(true);
    },
    toJump6() {
      this.$refs['jump6'].scrollIntoView(true);
    },
    toJump7() {
      this.$refs['jump7'].scrollIntoView(true);
    },
    toJump8() {
      this.$refs['jump8'].scrollIntoView(true);
    },
  },
};
</script>
 
 
<style scoped>
.left-menu {
  border-right: 1px solid #cccccc;
}
.son {
  height: 30px;
  line-height: 30px;
  width: 100%;
  padding-left: 10px;
  cursor: pointer;
}
</style>